<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>编辑 - 会员管理 - 我的后台管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="__STATIC__/layui/css/layui.css" />
	<link rel="stylesheet" href="__LIB__/dropzone/dropzone.css" />
	<link rel="stylesheet" href="__CSS__/iconfont.css">
	<link rel="stylesheet" href="__CSS__/common.css">
	<style>
		.dropzone{padding:0px;width:160px;height:auto;border:1px solid #e6e6e6;}
		.dropzone .dz-message{margin:0px;line-height:160px;}
		.headpic label{padding-top: 0px;padding-bottom: 0px;line-height: 100px;}
		.headpic a{display: inline-block;padding: 5px;}
		.headpic img{border-radius: 100px;}
		.layui-input-inline p{padding: 9px 15px;font-weight: 400;line-height: 20px;}
		.del_img{display: block;text-align: center;margin-top: 8px;color: red;cursor: pointer;}
		.del_img:hover{color: red;cursor: pointer;text-decoration: underline;}
	</style>
</head>
<body class="childrenBody">
	
	<div class="breadcrum">
		<div class="navgat">
			<h3>
				<a href="javascript:;" class=""><i class="iconfont">&#xe641;</i></a>
				<span>&gt;</span>
				<a href="javascript:;" class="">会员管理</a>
				<span>&gt;</span>
				<a href="javascript:;" class="">编辑</a>
			</h3>
		</div>
		<div class="refresh">
			<div class="layui-btn-group">
				<a onclick="location.reload();" class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe669;</i></a>
				<a onclick="history.back();" class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe65c;</i></a>
			</div>
		</div>
	</div>
	<div class="main">
		<form class="layui-form" style="width:500px;" id="form_data">
			<div class="layui-form-item">
				<label class="layui-form-label">头像上传</label>
				<div class="layui-input-block">				
					<div id="mydropzone" class="dropzone">
						{neq name="info.headpic" value=""}
						<div class="dz-preview dz-file-preview">
							<div class="dz-image">
								<img data-dz-thumbnail src="__ROOT__{$info.headpic}" width="100%" />
							</div>
							<a class="del_img" href="javascript:;" data-url="{$info.headpic}">删除文件</a>
						</div>
						{/neq}
							<div class="dz-image">
							</div>
					</div>
					<input type="hidden" name="headpic" value="{$info.headpic}">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">用户昵称</label>
				<div class="layui-input-inline">
					<input type="text" name="nickname" value="{$info.nickname}" class="layui-input" lay-verify="required" placeholder="昵称">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">用户账号</label>
				<div class="layui-input-inline">
					<input type="text" name="username" value="{$info.username}" class="layui-input" lay-verify="required" placeholder="账号">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">登录密码</label>
				<div class="layui-input-inline">
					<input type="password" name="password" class="layui-input" {eq name="info" value="" }lay-verify="required"{/eq}>
				</div>
				<div class="layui-form-mid layui-word-aux">置空则不修改</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-inline">
					<input type="radio" name="sex" value="1" title="男" {eq name="info.sex" value="1"}checked{/eq}>
					<input type="radio" name="sex" value="2" title="女" {eq name="info.sex" value="2"}checked{/eq}>
				</div>
			</div>	

			<div class="layui-form-item">
				<label class="layui-form-label">工作</label>
				<div class="layui-input-inline">
					<input type="text" name="job" value="{$info.job}" class="layui-input" placeholder="工作">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">兴趣爱好</label>
				<div class="layui-input-inline">
					<textarea name="interest" placeholder="请输入" class="layui-textarea">{$info.interest}</textarea>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">使用状态</label>
				<div class="layui-input-block">
					<input type="checkbox" name="status" value="1" title="正常使用" {neq name="info.status" value="-1"}checked{/neq}>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<input  type="hidden" name="user_id" value="{$info.user_id}">
					<button type="button" class="layui-btn" lay-submit lay-filter="go">立即提交</button>
					<button type="reset"  class="layui-btn layui-btn-primary">重置</button>
			    </div>
			</div>
		</form>		
	</div>

	<script type="text/javascript" src="__STATIC__/layui/layui.js"></script>
	<script type="text/javascript" src="__LIB__/dropzone/dropzone.js"></script>
	<script type="text/javascript" src="__JS__/jquery.min.js"></script>
	<script type="text/javascript">
		
		layui.use(['form','layer'],function(){
			var form  = layui.form,
				layer = layui.layer,
				$ = layui.$;

		 	// 提交数据
			form.on('submit(go)', function(data){
		 		var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.2});
		        // 序列化表单数据
				var form_data = $("#form_data").serialize();
				$.ajax({
					type: "POST",
			        url:"{:url('admin/member/edit')}",
					data:form_data,
					dataType:'json',
			        success: function(data){
		            	top.layer.close(index);
			        	
			        	if(data.status == -1){
			        		layer.alert(data.msg, {icon: 2});
			        	}else{
			        		layer.msg(data.msg, {icon: 1});
			        	}
			        }
				})
			})


			$(function(){
				if ($("div.dz-preview").length > 0) {
					$("div.dz-default.dz-message").hide();
				}	
			})

		})

		// upload img
		Dropzone.options.mydropzone = {
			url: "/admin/base/uploadfile?type=headpic",
			maxFilesize: 2,
			maxFiles: 1,
			paramName:"image",
			acceptedFiles: "image/*",
			addRemoveLinks:true,
			dictRemoveFile:"删除文件",
			dictDefaultMessage:"点击上传",
			dictFallbackMessage:"抱歉，您的浏览器暂不支持图片上传功能",
			init:function(){
				this.on("success",function(file, data){
					console.log(file);

					if (data.status == -1) {
						layer.alert(data.msg);
					}else{
						$("div.dz-preview.dz-file-preview").remove();
						// 绑定文件路径
						file._removeLink.setAttribute("data-url",data);
						$("input[name='headpic']").val(data);
						layer.msg("上传成功");
					}
				});
				this.on("error",function(file, errorMessage){
					if (file.status == "error") {
						file.previewElement.remove();
						layer.alert(errorMessage);
					}
				});
				this.on("removedfile",function(file){
					var url = file._removeLink.getAttribute("data-url");
					del_image(url);
				});				
			}

		};

		// 手动删除文件
		$(".del_img").click(function(){
			var url = $(this).attr("data-url");
			layer.confirm('确认删除？', {icon: 3, title:'提示'}, function(index){
				del_image(url);
			});
		})

		// 删除图片
		function del_image(url){
			$.ajax({
				type: "POST",
		        url:"{:url('admin/base/del_image')}",
				data:{'url':url},
				dataType:'json',
		        success: function(data){
		        	if(data.status == -1){
		        		layer.alert(data.msg, {icon: 2});
		        	}else{
						$("div.dz-preview.dz-file-preview").remove();
						$("input[name='headpic']").val('');
						$("div.dz-default.dz-message").show();
		        		layer.msg(data.msg, {icon: 1});
		        	}
		        }
			})
		}
	</script>
</body>
</html>